<template>
  <div class="box">
    <div v-show="add">
      <el-card>
        <AddConfigure ref="configure"/>
        <AddContent ref="content"/>
        <AddAnnexes ref="annexes"/>
      </el-card>
    </div>
    <el-card style="margin-top: 12px">
      <div>
        <el-button type="primary" @click="handleAdd(2)">提交</el-button>
        <el-button @click="handleAdd(1)">保存草稿</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import AddConfigure from "./AddConfigure.vue";
import AddContent from "./AddContent.vue";
import AddAnnexes from "./AddAnnexes.vue";

import { mapMutations } from "vuex";
import { addNoticeApi } from "@/api/modules/notice.api";

export default {
  components: {
    AddConfigure,
    AddContent,
    AddAnnexes,
    // Previews,
  },
  data() {
    return {
      visible: false,
      active: 0,
      add: true,
      previewsObj: {},
      outChainFlag: false,
    };
  },
  methods: {
    ...mapMutations("base", ["setBreadcrumb"]),
    async handleAdd(status) {
      console.log('123123123123123')
      const configureObj = this.$refs.configure.getContent();
      const content = this.$refs.content.getContent();
      const annexesObj = this.$refs.annexes.getContent();
      console.log('annexesObj', annexesObj)
      const obj = {
        ...configureObj,
        content,
        ...annexesObj,
        status,
      };
      await addNoticeApi(obj);
      this.$message({
        message: "成功",
        type: "success",
      });
      await this.$router.push({path: "/writings/notifications"});
      this.setBreadcrumb([
        {
          name: "文章管理",
          path: "/writings",
        },
        {
          name: "文章列表",
          path: "/writings/notifications",
        },
      ]);
    },
    handleBack() {
      this.add = true;
    },
  },
};
</script>
<style scoped>
.box {
  height: calc(100vh - 60px - 50px - 48px);
  overflow: auto;
}
</style>
